<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>结伴-摞窝窝</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta name="copyright" content="Copyright (c) 2006-2018 Mafengwo."/>
    <meta name="format-detection" content="telephone=no,address=no"/>
    <meta name="referrer" content="always"/>

    <script type="text/javascript">
        window.Env = {
            "CNZZID": 30081550,
            "IS_MOBILE": true,
            "tid": 2194171,
            "WWW_HOST": "www.mafengwo.cn",
            "IMG_HOST": "images.mafengwo.net",
            "P_HOST": "passport.mafengwo.cn",
            "P_HTTP": "https:\/\/passport.mafengwo.cn",
            "PAGELET_HTTP": "https:\/\/pagelet.mafengwo.cn",
            "JS_HOST": "js.mafengwo.net",
            "UID": 0,
            "CSTK": "118f98d3c0cd26e75a33b7ed676ecafd_a4b42f08d74009311a6a223836a9cc6f",
            "GOOGLE_MAP_KEY": "AIzaSyD-Su0x_rPy1xehlMBcMyTqWkU49Bk53nQ",
            "TONGJI_HOST": "tongji.mafengwo.cn"
        };
    </script>
    <link href="/css/mycss/together.css" rel="stylesheet" type="text/css"/>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css"/>
    <link href="https://css.mafengwo.net/css/cv/mobile+css+head:mobile+css+ui^YVw^1526627473.css" rel="stylesheet"
          type="text/css">
    <script>
        $(function () {

            var id = getParams().id;

            var concat;
            //通过当前结伴游的id 查询作者及结伴游的信息
            $.get('/togethers/' + id, function (data) {
                concat = data.tel;
                $(".contentInfo").renderValues(data, {
                    //判断是女性还是男性
                    'getGender': function (item, value) {
                        //如果是男性 删除女性图片样式,添加男性图标样式
                        if (value == 1) {
                            $(item).removeClass("female")
                            $(item).addClass("male")
                        } else {
                            $(item).removeClass("male")
                            $(item).addClass("female")
                        }
                    },
                    'getAuthorHref': function (item, value) {
                        var url = $(item).data('url');
                        $(item).attr('href', url + value);
                    }
                });
                $("#skipUser").click(function () {
                    window.location.href = "/userProfiles.html?id=" + data.author.id;
                });
                //查询当前结伴游报名人员
                $.get('/attends/' + id, function (data) {
                    //报名数量
                    $("#joinNum").html(data.length);
                    $("#joinPeople").html("已报名（" + data.length + "人）");
                    //判断是否显示联系方式
                    var show = false;
                    //报名人员是否包括当前用户
                    for (var i = 0; i < data.length; i++) {
                        if (user) {
                            if (user.id == data[i].user.id) {
                                show = true;
                            }
                        }
                    }
                    if (show) {
                        $("#skip").attr("disabled",true).css("pointer-events","none");
                        $("#skip").html("已报名");
                        $(".contact span").html(concat);
                    } else {
                        $("#skip").html("我要报名");
                        $(".contact span").html("报名后可见");
                    }

                    //渲染已关注用户的头像并绑定对应的连接
                    $(".joinUsers").renderValues({list: data}, {
                        'getJoinHref': function (item, value) {
                            var url = $(item).data('url');
                            $(item).attr('href', url + value);
                        }
                    });
                });
            });


            /*$.get("together/user", {id: id}, function (user) {
                $(".antuhorIf").renderValues(user)
                $("#skipUser").click(function () {
                    window.location.href = "userProfiles.html?id=" + user.id;
                });
            })

            $.get("fereContents", {fereId: fereId}, function (fere) {
                $(".container").renderValues(fere)
            })*/
            /*$.get("fereContents/" + fereId, function (fereContent) {
                $(".container").renderValues(fereContent);
            })*/

            $("#skip").click(function () {
                if (!user) {
                    $(document).dialog({
                        type: 'confirm',
                        closeBtnShow: false,
                        content: '请登录',
                        onClickConfirmBtn: function () {
                            location.href = "/login.html"
                        }
                    })
                } else {
                    window.location.href = "/mine/apply.html?id=" + id;
                }
            });

            //点击进行关注
            var user = JSON.parse(sessionStorage.getItem("user"));

            function getFous() {
                $.get("/togethers/" + id + "/" + user.id, function (data) {
                    if (data) {
                        $("#focus").html("已关注");
                    } else {
                        $("#focus").html("关注");
                    }
                });
            }

            getFocusAndJoinNum();

            //获取关注和加入数量
            function getFocusAndJoinNum() {
                $.get("/togethers/" + id + "/users", function (data) {
                    $("#focusNum").html(data.length);
                    //$("#joinNum").html(data.joinNum);
                    $("#focusPeople").html("已关注（" + data.length + "人）");
                    //渲染已关注用户的头像并绑定对应的连接
                    $(".focusUsers").renderValues({list: data}, {
                        'getHref': function (item, value) {
                            var url = $(item).data('url');
                            $(item).attr('href', url + value);
                        }
                    });


                    /*$(".skipUser").each(function (index, ele) {
                        $(ele).click(function () {
                            window.location.href = "userProfiles.html?id=" + $(this).data("uid");
                        });
                    });*/
                });

            }

            //判断用户是否已经关注过当前结伴游
            if (user) {
                getFous();
                $("#focus").click(function () {
                    $.get("/togethers/" + id + "/" + user.id, function (data) {
                        if (data) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: true,
                                content: '亲,您已经关注过此条结伴信息了.您想要取消关注么?',
                                onClickConfirmBtn: function () {
                                    $.ajax({
                                        type: "DELETE",
                                        url: "/togethers/" + id + "/" + user.id,
                                        success: function () {
                                            $(document).dialog({
                                                type: 'notice',
                                                infoText: '亲,已经取消关注了哦^_^!',
                                                autoClose: 1000,
                                                position: 'bottom'  // center: 居中; bottom: 底部
                                            });
                                            getFous();
                                            getFocusAndJoinNum();
                                        }
                                    })
                                },
                                onClickCancelBtn: function () {

                                },
                                onClickCloseBtn: function () {

                                }
                            });
                        } else {
                            $.post("/togethers/" + id + "/" + user.id, function (data) {
                                if (data.success) {
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '亲,关注成功了哟^_^!',
                                        autoClose: 1000,
                                        position: 'bottom'  // center: 居中; bottom: 底部
                                    });
                                    getFous();
                                    getFocusAndJoinNum();
                                }
                            });
                        }
                    });
                });
            } else {
                $("#focus").click(function () {
                    $(document).dialog({
                        type: 'notice',
                        infoText: '亲,要先登录才能关注哦^_^!',
                        autoClose: 1000,
                        position: 'bottom'  // center: 居中; bottom: 底部
                    });
                });
            }

            $("._j_publish_comment").click(function () {
                if ($("textarea").val()) {
                    $.post('/comments/strategy', {
                        'commenter.id': user.id, answer_id: id,
                        type: 4, content: $("textarea").val()
                    }, function (data) {
                        location.reload();
                    });
                } else {
                    $(document).dialog({
                        titleShow: false,
                        content: '请输入留言',
                    });
                }

            });


            //获取所有评论
            $.get('/comments/strategy', {type: 4, answer_id: id,pageSize:100}, function (data) {
                //设置评论数量
                $("._j_comment_total").html(data.total);
                console.log(data.list);
                $(".comment").renderValues(data, {

                    'getReplyId': function (item, value) {
                        $(item).attr('data-id', value);
                    },
                    getId: function (item, value) {
                        $(item).attr("data-id", value);
                    },
                    'getCommentId': function (item, value) {
                        $(item).attr('data-id', value);
                    },

                    'getTargetId': function (item, value) {
                        $(item).attr('data-id', value);
                    }

                })

                //点击回复的点击
                $(".btnReply").click(function () {
                    $("#ReplyModal input").val("")
                    if (!user) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: false,
                            content: '请登录',
                            onClickConfirmBtn: function () {
                                location.href = "/login.html"
                            }
                        })
                    } else {
                        //获取当前comment的id
                        var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                        console.log(commentId);
                        //设置回复人的id为当前登录的用户
                        $("#replyUserId").val(user.id);
                        //设置评论id
                        $("#commentId").val(commentId);
                        //设置目标人的id
                        var targetId = $(this).data("id");
                        console.log(targetId);
                        $("#targetUserId").val(targetId);


                        $("#ReplyModal").modal('show')
                    }
                });
                //点击回复人的昵称显示模态框进行回复
                $(".replyUserNickName").click(function () {
                    $("#ReplyModal input").val("")
                    //如果登录了可以回复
                    if (!user) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: false,
                            content: '请登录',
                            onClickConfirmBtn: function () {
                                location.href = "/login.html"
                            }
                        })
                    }
                    console.log($(this));
                    //获取当前comment的id
                    var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                    console.log(commentId);
                    //设置回复人的id为当前登录的用户
                    $("#replyUserId").val(user.id);
                    //设置评论id
                    $("#commentId").val(commentId);
                    //设置目标人的id
                    var targetId = $(this).closest(".replydiv").find("a.replyUserNickName").data("id");
                    console.log(targetId);
                    $("#targetUserId").val(targetId);


                    $("#ReplyModal").modal("show");
                });
                //点击被回复人的昵称显示模态框进行回复
                $(".targetUserNickName").click(function () {
                    $("#ReplyModal input").val("")
                    //如果登录了可以回复
                    if (!user) {
                        $(document).dialog({
                            type: 'confirm',
                            closeBtnShow: false,
                            content: '请登录',
                            onClickConfirmBtn: function () {
                                location.href = "/login.html"
                            }
                        })
                    }
                    //获取当前comment的id
                    var commentId = $(this).closest(".mysss").find("a.listComment").data("id");
                    console.log(commentId);
                    //设置回复人的id为当前登录的用户
                    $("#replyUserId").val(user.id);
                    //设置评论id
                    $("#commentId").val(commentId);
                    //设置目标人的id
                    var targetId = $(this).data("id");
                    console.log(targetId);
                    $("#targetUserId").val(targetId);


                    $("#ReplyModal").modal("show");
                });
            });


            //回复模态框被点击
            $("#replyFormSubmitBtn").click(function () {
                $("#replyForm").ajaxSubmit(function (data) {
                    if (data.success) {
                        $(document).dialog({
                            type: 'alert',
                            closeBtnShow: false,
                            content: '评论成功',
                        })
                        setTimeout(function () {
                            location.reload();
                        }, 500);
                    }
                })
            });

            /*//评论功能
            function getComments() {
                $.get("/fereContents/" + fereId + "/comment", function (data) {
                    var temp=' <div class="tit _j_comment_total">留言（'+data.length+'条）</div>\n' +
                        '        <div class="add-comment _j_comment_tpl">\n' +
                        '            <textarea rows="4" class="_j_comment" id="text"></textarea>\n' +
                        '            <div class="btn-block _j_publish_comment" data-tid="2194171"><a role="button" id="commentBtn">发表留言</a></div>\n' +
                        '        </div>';
                    for(var item in data){
                        temp+=' <div class="_j_comment_li">\n' +
                            '            <div class="item clearfix">\n' +
                            '                <div class="user-bar clearfix">\n' +
                            '                    <a class="author" href="userProfiles.html?id='+data[item].user.id+'">\n' +
                            '                        <img src="'+data[item].user.headImgUrl+'">\n' +
                            '                        <span>'+data[item].user.nickName+'</span><br>\n' +
                            '                        <span class="level">Lv 2</span>\n' +
                            '                    </a>\n' +
                            '                    <span class="time">'+data[item].createTime+'</span>\n' +
                            '                    <a class="btn-reply _j_replay" data-cid="28979761" data-name="陈秀珍" data-uid="77960730">回复</a>\n' +
                            '                </div>\n' +
                            '                <div class="content">'+data[item].content+'</div>\n' +
                            '            </div>\n' +
                            '        </div>'
                    }
                    $(".comments").html(temp);
                    if (user) {
                        $("#commentBtn").click(function () {
                            var comment = $("#text").val();
                            $.post("fereContents", {"user.id": user.id, "fere.id": fereId, "content": comment}, function (data) {
                                if (data.success) {
                                    $(document).dialog({
                                        type: 'notice',
                                        infoText: '亲,评论成功^_^!',
                                        autoClose: 1000,
                                        position: 'bottom'  // center: 居中; bottom: 底部
                                    });
                                    $("#text").val("");
                                    getComments();
                                }
                            });
                        });
                    }else{
                        $("#commentBtn").click(function () {
                            $(document).dialog({
                                type: 'notice',
                                infoText: '亲,要先登录才能评论哦^_^!',
                                autoClose: 1000,
                                position: 'bottom'  // center: 居中; bottom: 底部
                            });
                        });
                    }
                });
            }
            getComments();*/
        })
    </script>
    <link rel="stylesheet" href="../css/mycss/mycss.css">


    <style>
        #divcss5 {
            margin: 0
        }
    </style>
</head>
<body>
<div id="pos38"></div>
<header class="head2home">
    <a href="/" class="myLogo"></a>
    <div class="rBtn">
        <a href="/" class="home">摞窝窝首页</a>
    </div>
</header>


<input type="hidden" class="_j_my_id" data-myid=""/>
<section class="container">
    <div class="contentInfo">
        <div class="detail-head">
            <img src="/img/top-bg.bmp">
            <div class="cover-info">
                <div class="va-wrap">
                    <div class="va-middle">
                        <h3 class="text-shadow" render-html="title"></h3>
                        <div class="user">
                        <span class="avatar">
                            <a id="skipUser" render-key="author.id" render-fun="getAuthorHref"
                               data-url="/userProfiles.html?id=">
                                <img render-src="author.headImgUrl"></a></span>
                            <span class="name" render-html="author.nickName"></span>
                            <span class="level">Lv.13</span>
                            <span class="gender male" render-key="author.gender" render-fun="getGender"></span><br>
                            <span class="time" render-html="createTime"></span>
                        </div>
                    </div>
                    <ul class="nums va-middle text-shadow">
                        <li>关注<em class="_j_care_count" id="focusNum"></em></li>
                        <li>报名<em id="joinNum"></em></li>
                    </ul>
                </div>
            </div>
        </div>
        <ul class="base-info clearfix">
            <li class="date">出行时间<span render-html="travelTime">2018-11-24</span></li>
            <li class="days">出行天数<span render-html="days"></span></li>
            <li class="contact">联系方式
                <span>
                             报名后可见
                    </span>
            </li>
        </ul>
        <div class="detail-info" render-html="content.content">
            <div class="btn-block">
                <a class="_j_not_login">马上报名</a>
            </div>
        </div>
    </div>
    <dl class="user-list _j_care_info">
        <dt id="focusPeople"></dt>
        <dd class="focusUsers">
            <ul style="width:550px" render-loop="list">
                <li class="_j_set_width" style="width: 25px;">
                    <a class="skipUser" render-key="list.id" render-fun="getHref" data-url="/userProfiles.html?id=">
                        <img render-src="list.headImgUrl">
                    </a>
                </li>
            </ul>
        </dd>
    </dl>
    <dl class="user-list">
        <dt id="joinPeople"></dt>
        <dd class="joinUsers">
            <ul style="width:150px" render-loop="list">
                <li class="_j_set_width" style="width: 25px;">
                    <a class="skipUser" render-key="list.user.id" render-fun="getJoinHref"
                       data-url="/userProfiles.html?id=">
                        <img render-src="list.user.headImgUrl">
                    </a>
                </li>
            </ul>
        </dd>
    </dl>
    <div class="streak">

    </div>


    <div class="comments _j_comment_list">
        <a style="color: gray">留言</a><a class="tit _j_comment_total" style="color: red"> </a><a
            style="color: gray">条</a>
        <hr>
        <div class="add-comment _j_comment_tpl">
            <textarea rows="4" class="_j_comment"></textarea>
            <div class="btn-block _j_publish_comment" id="divcss5"><a>发表留言</a></div>
        </div>

        <!--一级评论-->
        <div class="comment">
            <div class="item clearfix" render-loop="list">
                <div class="user-bar clearfix row">
                    <a data-href="/userProfiles.html?id=" class="author mysss">
                        <img render-src="list.commenter.headImgUrl">
                    </a>
                    <div class="col mysss">
                        <a render-key="list.id" render-fun="getCommentId" class="listComment"></a>
                        <span render-html="list.commenter.nickName"></span><br>
                        <span class="level">Lv 8</span>

                        <span class="time" render-html="list.createtime"></span>
                        <a class="btnReply" render-key="list.commenter.id"
                           render-fun="getId">回复</a><br>
                        <span class="content" render-html="list.content"></span>
                        <!--二级评论-->
                        <div id="commentReply">
                            <div render-loop="list.commentOfAlls">
                                <div class="replydiv">
                                    <a style="color: #545b62" class="replyUserNickName"
                                       render-html="list.commentOfAlls.replyer.nickName"
                                       render-key="list.commentOfAlls.replyer.id" render-fun="getReplyId">
                                    </a>
                                    回复:
                                    <a style="color: #545b62" class="byreplyerrNickName targetUserNickName"
                                       render-html="list.commentOfAlls.byreplyerr.nickName"
                                       render-key="list.commentOfAlls.byreplyerr.id" render-fun="getTargetId">
                                    </a>
                                    <span class="comment-date"
                                          render-html="list.commentOfAlls.createtime"></span><br>
                                    <span name="content" render-html="list.commentOfAlls.content"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="fixed-btm">
            <div class="btn-group">
                <a class="btn-attention _j_not_login" id="focus">关注</a>
                <span class="space"></span>
                <a class="btn-join _j_not_login" id="skip">我要报名</a>
            </div>
        </div>
    </div>
</section>

<!--回复模态框-->
<div class="modal fade" id="ReplyModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">回复</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/comments/strategy/reply" method="post" id="replyForm">
                    <input type="hidden" id="replyUserId" name="replyer.id"/><!--评论人Id-->
                    <input type="hidden" id="targetUserId" name="byreplyerr.id"/><!--被评论人Id-->
                    <input type="hidden" id="commentId" name="comment_id"/><!--这条评论的id-->
                    <div class="form-group">
                        <label class="col-sm-4 control-label">评论内容：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="content"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary " id="replyFormSubmitBtn">评论</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
